<script>
export default {
  name: "EnterprisePage",
  data() {
    return {
      district: "全部",
      showDistrictPicker: false,
      districts: [
        "全部",
        "浦东新区",
        "徐汇区",
        "静安区",
        "长宁区",
        "虹口区",
        "普陀区",
        "黄浦区",
      ],
      companies: [],
      page: 1,
      pageSize: 5,
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  methods: {
    toggleExpand(company) {
      company.expanded = !company.expanded;
    },
    selectDistrict(value) {
      this.district = value;
      this.showDistrictPicker = false;
      this.resetList();
      this.loadData();
    },
    callPhone(phone) {
      window.location.href = `tel:${phone}`;
    },
    previewImages(images, startPosition) {
      import("vant").then(({ ImagePreview }) => {
        ImagePreview({
          images,
          startPosition,
          closeable: true,
          closeIconPosition: "top-right",
        });
      });
    },
    handleImageError(event) {
      event.target.style.display = "none";
      event.target.parentElement.innerHTML =
        '<div class="image-placeholder"><van-icon name="photo-o" size="24" color="#ccc" /></div>';
    },
    resetList() {
      this.page = 1;
      this.companies = [];
      this.finished = false;
    },
    async loadData() {
      if (this.loading || this.finished) return;

      this.loading = true;
      try {
        await new Promise((resolve) => setTimeout(resolve, 1000));

        // 模拟总共有43条数据
        const totalItems = 43;
        const startIndex = (this.page - 1) * this.pageSize;
        const endIndex = Math.min(startIndex + this.pageSize, totalItems);

        // 如果已经加载完所有数据
        if (startIndex >= totalItems) {
          this.finished = true;
          this.loading = false;
          return;
        }

        const mockData = Array.from(
          { length: endIndex - startIndex },
          (_, index) => ({
            id: `company_${startIndex + index + 1}`,
            name: `测试公司${startIndex + index + 1}`,
            phone: "13800138000",
            address: "测试地址",
            description: "测试描述",
            images: [
              "https://picsum.photos/200/200?random=" +
                (startIndex + index + 1),
            ],
            expanded: false,
          })
        );

        this.companies.push(...mockData);
        this.page++;

        // 检查是否已经加载完所有数据
        if (endIndex >= totalItems) {
          this.finished = true;
        }
      } catch (error) {
        console.error("加载数据失败:", error);
      } finally {
        this.loading = false;
        this.refreshing = false;
      }
    },
    onRefresh() {
      this.refreshing = true;
      this.resetList();
      this.loadData();
    },
  },
  mounted() {
    this.loadData();
  },
};
</script>

<template>
  <div class="company-list-page">
    <!-- 顶部导航栏 -->
    <div class="page-header">
      <div class="header-left" @click="$router.go(-1)">
        <van-icon name="arrow-left" size="18" color="#333" />
      </div>
      <div class="header-title">白蚁防治企业</div>
      <div class="header-right"></div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-bar">
      <div class="filter-item" @click="showDistrictPicker = true">
        {{ district }}
        <van-icon name="arrow-down" size="12" color="#999" />
      </div>
    </div>

    <!-- 公司列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        :loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        loading-text="加载中..."
        @load="loadData"
        :immediate-check="false"
      >
        <div class="company-list">
          <div
            v-for="company in companies"
            :key="company.id"
            class="company-card"
          >
            <div class="company-name">{{ company.name }}</div>

            <div class="company-info">
              <div class="info-item" @click="callPhone(company.phone)">
                <van-icon name="phone-o" size="14" color="#999" />
                <span>联系电话：{{ company.phone }}</span>
              </div>

              <div class="info-item">
                <van-icon name="location-o" size="14" color="#999" />
                <span>企业地址：{{ company.address }}</span>
              </div>

              <div class="info-item description-item">
                <van-icon name="description" size="14" color="#999" />
                <span :class="{ 'truncate-text': !company.expanded }"
                  >企业简介：{{ company.description }}</span
                >
              </div>
            </div>

            <div v-if="company.expanded" class="fee-section">
              <div class="section-title">收费标准</div>
              <div class="image-list">
                <div
                  v-for="(image, index) in company.images"
                  :key="index"
                  class="image-item"
                  @click="previewImages(company.images, index)"
                >
                  <img
                    :src="image"
                    :alt="`收费标准 ${index + 1}`"
                    @error="handleImageError"
                  />
                </div>
              </div>
            </div>

            <div class="expand-btn" @click="toggleExpand(company)">
              <van-icon
                :name="company.expanded ? 'arrow-up' : 'arrow-down'"
                size="16"
                color="#999"
              />
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>

    <!-- 区域选择弹出层 -->
    <van-popup v-model="showDistrictPicker" position="bottom">
      <van-picker
        title="选择区域"
        :columns="districts"
        @confirm="selectDistrict"
        @cancel="showDistrictPicker = false"
        show-toolbar
      />
    </van-popup>
  </div>
</template>

<style lang="less" scoped>
.company-list-page {
  background-color: #f5f5f5;
  height: 100vh;
  overflow-y: auto;
}

.page-header {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 16px;

  .header-left {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -16px;
    cursor: pointer;
  }

  .header-title {
    flex: 1;
    text-align: center;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    font-size: 17px;
    color: #333;
  }

  .header-right {
    width: 44px;
  }
}

.filter-bar {
  display: flex;
  background-color: #fff;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 44px;
  z-index: 99;

  .filter-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333;
    cursor: pointer;
  }
}

.company-list {
  padding: 15px 16px 0px 16px;
}

.company-card {
  background-color: #fff;
  border-radius: 4px;
  padding: 14px 15px 0 15px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  .company-name {
    height: 21px;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    line-height: 21px;
    margin-bottom: 14px;
  }

  .company-info {
    margin-bottom: 0;

    .info-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 8px;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #999999;
      line-height: 12px;
      gap: 6px;

      &:last-child {
        margin-bottom: 0;
      }

      .van-icon {
        margin-top: 2px;
        flex-shrink: 0;
      }

      span {
        flex: 1;
      }
    }

    .description-item span {
      line-height: 16px;
    }
  }

  .fee-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;

    .section-title {
      margin-bottom: 12px;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #333;
    }

    .image-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      .image-item {
        width: calc((100% - 16px) / 3);
        height: 80px;
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 6px;
        }
      }
    }
  }

  .expand-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    cursor: pointer;
  }
}

.image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.truncate-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.van-list {
  min-height: 100vh;
}

.van-pull-refresh {
  min-height: calc(100vh - 44px - 45px);
}
</style>
